<style lang="scss" scoped>
.logo {
  width: 100px;
  height: 100px;
  background: #dbebf8;
  border-radius: 10px;
  margin: 10px;
}
.h1 {
  width: 100%;
  padding: 0 10px;
  height: 70px;
}
.c1 {
  width: 100%;
  height: 140px;
  background: #f8f8f8;
  margin: 10px 0;
  padding: 10px;
  button {
    margin: 20px 0;
  }
}
.yy {
  width: 100%;
  height: 400px;
  background: #f8f8f8;
  border-radius: 10px;
  padding: 10px;
  .list {
    dl {
      display: flex;
      padding: 10px;
      dt {
        width: 50px;
        height: 100px;
        img {
          width: 50px;
          height: 50px;
        }
        margin: 0 10px;
      }
      dd {
        .name {
          font-size: 20px;
          font-weight: 800;
          display: flex;
          justify-content: space-between;
          align-items: center;
        }
      }
    }
  }
}
</style>
<template>
  <div>
    <header>
      <van-nav-bar
        left-arrow
        @click-left="$router.back()"
        :title="v[0].nosocomium"   
        v-if="v"
      />
    </header>

    <div
      style="
        width: 100%;
        height: 100%;
        background: linear-gradient(to bottom, #4fc08d, #fff);
      "
      v-if="v"
    >
      <div style="width: 100%; height: 100%"></div>
      <img v-if="yy" :src="yy.socoimage" alt="" style="" class="logo" />
      <div class="h1">
        <h2>{{ v[0].nosocomium }}</h2>
        <div>
          <van-tag plain type="success" style="margin: 10px 5px">{{
            v[0].socostate
          }}</van-tag>
          <van-tag plain type="success">{{ v[0].socolv }}</van-tag>
        </div>
      </div>
      <!-- 医院概况 -->
      <van-cell title="医院概况" is-link @click="showPopup" value="查看简介" />
      <van-popup
        v-model:show="show"
        closeable
        position="bottom"
        :style="{ height: '60%' }"
      >
        <h2 style="text-align: center; margin: 10px 0">医院概况</h2>
        <h4>医院简介：</h4>
        {{ v[0].socodescword }}
      </van-popup>
    </div>
    <div class="c1" v-if="v">
      <p>距你>99km</p>
      <p>地址：{{ v[0].sococity }}</p>
      <van-button
        style="width: 100%; border-radius: 20px; text-align: center"
        type="success"
        @click="handYY(v[0].socoid)"
        >去挂号</van-button
      >
    </div>
    <!--  本院医生-->
    <div class="yy">
      <h2>本院医生</h2>
      <div class="list" v-if="v">
        <dl v-for="(item, index) in v.slice(0, 3)" :key="index" :v="item">
          <dt>
            <img :src="item.doctorimage" alt="" />
          </dt>
          <dd>
            <div class="name">
              <div>{{ item.doctorname }}</div>

              <span style="font-size: 15px">{{ item.doctorstate }}</span>
              <span style="position: absolute; right: 10px">
                <van-button
                  round
                  type="success"
                  style="width: 80px; height: 35px"
                  @click="handRDoctor(item)"
                  >去挂号</van-button
                >
              </span>
            </div>

            <div style="font-size: 14px">{{ item.doctoradministre }}</div>
            <div>擅长：{{ item.socoadmin }}</div>
          </dd>
        </dl>
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
import { ref } from 'vue'
import { useRoute, useRouter } from 'vue-router'
import axios from 'axios'
import type { ListState,doctorState } from '@/interface';
const route = useRoute()
const router = useRouter()
const id = route.params.id
const v = ref()

const yy = ref()
const ListData = ref<ListState[]>([])
const getDetailData = async () => {
  const res = await axios.get('/api/nosocomium/detail', { params: { id: id } })
  v.value = res.data.data
  console.log(v.value)

  yy.value = res.data.data[0]
}
getDetailData()

const show = ref(false)
const showPopup = () => {
  show.value = true
}

const handYY = (v: string) => {
  router.push(`/GoYYregistgration/${id}`)
}
const handRDoctor = (item: doctorState) => {
  router.push({
    path: `/RDoctor/${item.doctorid}`,
  })
}
</script>
